<template>
  <div id="cinema">
    <div class="head">
    <div class="hbox">
        <div class="left" @click="back">返回</div>
        <div class="middle">猫眼电影</div>
    </div>
    </div>
    <div class="addressshow">
      <ul class="content">
        <li v-for="add in address" :key="add.id">
          <div class="box">
            <div class="left">
              <div class="name">{{ add.info.name }}</div>
              <div class="local">{{ add.info.address }}</div>
              <div class="other" v-if="add.info.tags">
                <ul>
                  <li v-for="(s, index) in add.info.tags" :key="index">
                    {{ s }}
                  </li>
                </ul>
              </div>
            </div>

            <div class="right">
              <div class="price">{{ add.info.price }}</div>
              <div class="rmb">元起</div>
            </div>
          </div>
          <hr />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  mounted(){
  },
  props: {
    address: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods:{
    back(){
      this.$router.back()
    },
  }
};
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.addressshow{
    margin-top:60px ;
}
.head {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.hbox {
  height: 50px;
  width: 100%;
  background-color: red;
  line-height: 50px;
  text-align: center;
  color: white;
  position: relative;
}
.head .left {
  position: absolute;
  left: 10px;
}
.content > li {
  margin: 10px 0;
  padding:10px;
}

.box {
  display: flex;
  justify-content: space-between;
}

.content > li:first-child {
  margin-top: 0;
}

.content > li:last-child {
  margin-bottom: -30px;
}

.content > li .left > div {
  margin-bottom: 5px;
  font-size: smaller;
}

.content > li .left > div:first-child {
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 700;
}

.content > li .left .local {
  width: 300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

hr {
  margin-top: 10px;
}

.content > li .other > ul {
  display: flex;
  flex-wrap: wrap;
}

.content > li .other > ul li {
  font-size: 3px;
  border: #3c3ceb 1px solid;
  border-radius: 2px;
  width: auto;
  padding: 2px;
  height: 15px;
  color: #3c3ceb;
  line-height: 15px;
  margin-right: 5px;
  margin-top: 10px;
}

.right {
  width: 70px;
  text-align: right;
  color: red;
}

.right>div {
  display: inline-block;
}

.right .rmb {
  font-size: 5px;
}
</style>